<template>
	<view>
		<u-popup v-model="show" mode="bottom" :custom-style="customStyle" :mask-custom-style="maskCustomStyle" border-radius="24" closeable @click="popupSpecsbtn">
			<view class="flex-col section_3_b">
			    <view class="flex-col group_b">
			      <text class="self-start text_b mt-2-5">添加账号</text>
			    </view>
			    <view class="mt-24 flex-col">
			      <view class="flex-row equal-division_b">
			        <view @click="changeTaocan(item,index)" v-for="(item,index) in list" :key="index" class="flex-col justify-start group_2_b equal-division-item_b">
			          <view class="flex-col justify-center" :class="current == index ? 'section_5_b' : 'section_4_b'">
			            <text class="self-center" :class="current == index ? 'font_2_b text_3_b' : 'font_2_b'">{{item.name}}</text>
			            <view class="flex-row items-baseline justify-center group_3_b">
			              <text :class="current == index ? 'font_4_b text_5_b' : 'font_4_b'">¥</text>
			              <text class="font_3_b" :class="current == index ? 'font_3_b text_4_b' : 'font_3_b'">{{item.price | getIntegerPart}}</text>
			              <text class="font_77_b" :class="current == index ? 'font_77_b text_4_b' : 'font_3_b'">.{{item.price | getDecimalPart}}</text>
			            </view>
			            <text v-if="index%3 == 0" class="self-center" :class="current == index ? 'font_5_b text_7_b text_8_b' : 'font_5_b text_6_b text_7_b'">首开优惠</text>
			            <text v-if="index%3 != 0" class="self-center" :class="current == index ? 'font_5_b text_7_b text_8_b' : 'font_5_b text_6_b text_7_b'">限时优惠</text>
			          </view>
			          <view v-if="index%3 == 0" class="flex-col justify-start items-center text-wrapper_b pos_b">
			            <text class="font_b text_2_b">首开优惠</text>
			          </view>
			          <view v-if="index%3 != 0" class="flex-col justify-start items-center text-wrapper_b pos_b">
			            <text class="font_b text_2_b">限时优惠</text>
			          </view>
			        </view>
			      </view>
			
			      <view class="flex-row pay-type_b">
			        <view @click="changePayType(item,index)" v-for="(item,index) in payTypeList" :key="index" class="flex-row justify-between items-center" :class="[currentPay == index ? 'section_77_b' : 'section_66_b',index == 1 ? 'ml-11-5' : '']">
			          <view class="flex-row items-center">
			            <image class="shrink-0 image_22_b" :src="item.icon" />
			            <text class="font_66_b text_99_b ml-4-5">{{item.title}}</text>
			          </view>
			          <image v-if="currentPay == index" class="image_44_b image_66_b" src="/static/image/haoduogeni/pay-type-checked.png" />
			          <image v-else class="image_44_b image_66_b" src="/static/image/haoduogeni/uncheck-icon.png" />
			        </view>
			      </view>
			
			      <view class="flex-row justify-between items-center self-stretch section_6_b">
			        <view class="flex-row items-baseline">
			          <text class="font_6_b">实付</text>
			          <text class="font_7_b text_12_b">¥</text>
			          <text class="text_10_b">{{price | getIntegerPart}}</text>
			          <text class="font_7_b">.{{price | getDecimalPart}}</text>
			        </view>
			        <view @click="buyNow" class="flex-col justify-start items-center text-wrapper_2_b"><text class="text_11_b">确认购买</text></view>
			      </view>
			    </view>
			  </view>
		</u-popup>
	</view>
</template>

<script>
	import {
	  getCodeList,
	  createOrder,
	  getOpenid
	} from '../../../haoduogeni/common/api/user';
	export default {
		props: {
			// show: {
			//       value: false,
			//       type: Boolean
			//     },
				openid: {
				      value: '',
				      type: String
				    }
		},
		data() {
			return {
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.2)'
				},
				list: [],
				    current: 0,
				    price: 0,
				    taocan_id: 0,
				    payTypeList: [{
				        title: '金币支付',
				        icon: '/static/image/haoduogeni/pay-jinbi-icon.png',
				        type: 2,
				      },
				      {
				        title: '微信支付',
				        icon: '/static/image/haoduogeni/pay-wechat-icon.png',
				        type: 1,
				      }
				    ],
				    currentPay: 1,
				    pay_type: 1,
				    isLoading: false,
					show: false
			}
		},
		filters: {
			getIntegerPart(num) {
			    var str = num.toString();
			    return str.split('.')[0] || '';
			  },
			  // 截取小数点后的数字
			  getDecimalPart(num) {
			    var str = num.toString();
			    var parts = str.split('.');
			    return parts.length > 1 ? parts[1] : '';
			  }
		},
		created() {
			var _this = this;
			    getCodeList().then(res => {
			      //成功时回调函数
			      console.log(res.errno, 'getCodeList')
			      if (res.errno == 0) {
			       
			          _this.list = res.data;
			          _this.price = res.data[0].price;
			          _this.taocan_id = res.data[0].id;
			        
			      }
			    }).catch(err => {
			      //失败时回调函数
			      console.log(err)
			    })
		},
		methods: {
			open(){
				this.show = true;
			},
			changePayType(item,index) {
			     
			        this.currentPay = index;
			        this.pay_type = item.type;
			     
			    },
			    buyNow() {
			      if(this.isLoading){
			        uni.showToast({
			          title: '请勿重复点击',
			          icon: 'none'
			        })
			        return 
			      }
			      uni.showLoading({
			        title: '加载中',
			      })
			      
			        this.isLoading = true;
			      
			      var _this = this;
			      createOrder({
			        pt_id: this.$ptId,
			        uid: uni.getStorageSync('userId'),
			        type: 3, // 1充值积分2充值金币3购买套餐
			        taocan_id: this.taocan_id,
			        pay_type: this.pay_type, //1微信支付2金币支付 （只有买套餐有金币支付）
			        openid: this.openid
			      }).then(res => {
			        //成功时回调函数
			        console.log(res.errno, 'getCodeList')
			        if (res.errno == 0) {
			          var payInfo = res.data.payInfo;
			          if(this.pay_type == 2){
			            uni.showToast({
			              title: '购买成功',
			              icon: 'none'
			            })
			            
			              this.isLoading = false;
			            
			            uni.hideLoading();
			            _this.$emit("confirm");
			            _this.show = false;
			          }else {
			            this.wechatPay(payInfo)
			          }
			        }else {
			          uni.showToast({
			            title: res.msg,
			            icon: 'none'
			          })
			          this.setData({
			            isLoading: false
			          })
			          uni.hideLoading();
			        }
			        // var payInfo = {
			        //   appId: "wx3faa28fc6e94b17a",
			        //   timestamp: "1754981691",
			        //   nonceStr: "0ta2iapnv6w3kj51d2sqvmjxnxwe4q0e",
			        //   package: "prepay_id=wx121454516049247774a73990d1abb40000",
			        //   signType: "MD5",
			        //   paySign: "8720FAA04BCC526F6C58E775B16DAF70",
			        //   timestamp: "1754981691"
			        // };
			        // this.wechatPay(payInfo)
			      }).catch(err => {
			        //失败时回调函数
			        console.log(err)
			        this.isLoading = false;
			        uni.hideLoading();
			      })
			    },
			    wechatPay(info) {
			      var t = this;
			      uni.requestPayment({
			        timeStamp: info.timestamp,
			        nonceStr: info.nonceStr,
			        package: info.package,
			        signType: info.signType ? info.signType : "MD5",
			        paySign: info.paySign,
			        success: function (a) {
			          uni.showModal({
			            title: "提示",
			            content: "支付成功",
			            showCancel: !1,
			            success: function (a) {
			              t.isLoading = false;
			              uni.hideLoading();
			              if (a.confirm) {
			                t.emit("confirm");
			              }
			            }
			          });
			        },
			        fail: function (a) {
			          console.log(a), wx.showToast({
			            title: "支付失败请稍后重试",
			            icon: "none",
			            duration: 2e3
			          });
			          t.isLoading = false;
			          uni.hideLoading();
			        }
			      });
			    },
			    changeTaocan(item,index) {
			      
			        this.current = index;
			        this.price = item.price;
			        this.taocan_id = item.id;
			      
			    },
			    popupSpecsbtn(t) {
				
				  console.log(t);
				  this.$emit("closeShow");
				  this.show = false;
			    },
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../common/css/common.css");
	.mt-2-5 {
	  margin-top: 5rpx;
	}
	.ml-13 {
	  margin-left: 26rpx;
	}
	.ml-3-5 {
	  margin-left: 7rpx;
	}
	.ml-2-5 {
	  margin-left: 5rpx;
	}
	.section_3_b {
	  padding: 40rpx 30rpx 71rpx;
	  background-color: #ffffff;
	  border-radius: 32rpx 32rpx 0 0;
	}
	.group_b {
	  padding-left: 10rpx;
	}
	.image_b {
	  width: 24rpx;
	  height: 25rpx;
	}
	.text_b {
	  color: #000000;
	  font-size: 34rpx;
	  font-family: PingFang SC;
	  line-height: 32rpx;
	}
	.equal-division_b {
	  align-self: stretch;
	  margin: 0 12rpx;
	}
	.group_2_b {
	  position: relative;
	  flex: 1 1 205rpx;
	  margin-right: 26rpx;
	}
	.group_2_b:last-child {
	  margin-right: 0;
	}
	.equal-division-item_b {
	  padding-top: 16rpx;
	}
	.section_4_b {
	  padding: 54rpx 0 15rpx;
	  border-radius: 16rpx;
	  background-image: url('https://jianji.axu9.com/friendCircleImg/recharge-bg.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.font_2_b {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 26rpx;
	  font-weight: 500;
	  color: #000000;
	}
	.group_3_b {
	  margin-top: 31rpx;
	  padding: 0 4rpx;
	}
	.font_4_b {
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  line-height: 20rpx;
	  font-weight: 500;
	  color: #000000;
	}
	.font_3_b {
	  font-size: 52rpx;
	  font-family: DIN;
	  letter-spacing: -1.3rpx;
	  line-height: 38rpx;
	  font-weight: 700;
	  color: #000000;
	}
	.font_5_b {
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 20rpx;
	  color: #000000;
	}
	.text_6_b {
	  line-height: 21rpx;
	}
	.text_7_b {
	  margin-top: 56rpx;
	}
	.text-wrapper_b {
	  padding: 8rpx 0;
	  background-color: #000000;
	  border-radius: 12rpx 8rpx 8rpx 0rpx;
	  width: 106rpx;
	}
	.pos_b {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.font_b {
	  font-size: 20rpx;
	  font-family: Chiron GoRound TC;
	  line-height: 20rpx;
	  color: #22dd85;
	}
	.text_2_b {
	  line-height: 19rpx;
	}
	.section_5_b {
	  padding: 54rpx 0 15rpx;
	  border-radius: 16rpx;
	  background-image: url('https://jianji.axu9.com/friendCircleImg/recharge-active-bg.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  text-align: center;
	}
	.text_3_b {
	  color: #ffffff;
	}
	.text_5_b {
	  color: #ffffff;
	}
	.text_4_b {
	  color: #ffffff;
	}
	.text_8_b {
	  color: #ffffff;
	  line-height: 21rpx;
	}
	.pos_2_b {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.pos_3_b {
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	.font_6_b {
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	  color: #000000;
	}
	.text_9_b {
	  margin-left: 47rpx;
	  margin-top: 36rpx;
	}
	.section_6_b {
	  margin-top: 18rpx;
	  padding-left: 40rpx;
	  background-color: #effaf8;
	  border-radius: 20rpx;
	}
	.font_7_b {
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 20rpx;
	  font-weight: 500;
	  color: #000000;
	}
	.font_77_b {
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 20rpx;
	  font-weight: 500;
	}
	.text_12_b {
	  margin-left: 8rpx;
	  line-height: 19rpx;
	}
	.text_10_b {
	  margin-left: 5rpx;
	  color: #000000;
	  font-size: 48rpx;
	  font-family: DIN;
	  font-weight: 700;
	  line-height: 36rpx;
	  letter-spacing: -1.2rpx;
	}
	.text-wrapper_2_b {
	  padding: 36rpx 0;
	  background-image: linear-gradient(90deg, #00ceb8 0%, #0fcd99 100%);
	  border-radius: 20rpx;
	  width: 340rpx;
	  height: 100rpx;
	}
	.text_11_b {
	  color: #ffffff;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  line-height: 29rpx;
	}
	
	.pay-type_b {
	  margin-top: 50rpx;
	  margin-bottom: 30rpx;
	}
	.ml-11-5 {
	  margin-left: 23rpx;
	}
	.ml-4-5 {
	  margin-left: 9rpx;
	}
	.section_66_b {
	  padding: 28rpx 30rpx 25rpx;
	  flex: 1 1 332rpx;
	  background-color: #ffffff;
	  border-radius: 16rpx;
	  height: 90rpx;
	  border-left: solid 1rpx #eeeeee;
	  border-right: solid 1rpx #eeeeee;
	  border-top: solid 1rpx #eeeeee;
	  border-bottom: solid 1rpx #eeeeee;
	}
	.image_22_b {
	  width: 30rpx;
	  height: 30rpx;
	}
	.font_66_b {
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 26rpx;
	  font-weight: 500;
	  color: #000000;
	}
	.text_99_b {
	  line-height: 25rpx;
	}
	.image_44_b {
	  width: 32rpx;
	  height: 32rpx;
	}
	.image_66_b {
	  margin-right: 6rpx;
	}
	.section_77_b {
	  padding: 28rpx 30rpx;
	  flex: 1 1 332rpx;
	  background-color: #ffffff;
	  border-radius: 16rpx;
	  height: 90rpx;
	  border-left: solid 1rpx #0ac491;
	  border-right: solid 1rpx #0ac491;
	  border-top: solid 1rpx #0ac491;
	  border-bottom: solid 1rpx #0ac491;
	}
	.image_33_b {
	  width: 40rpx;
	  height: 33rpx;
	}
	.text_110_b {
	  line-height: 25rpx;
	}
	.image_55_b {
	  margin-right: 7rpx;
	}

</style>
